@import './var';

::placeholder {
  color: @font-light-color;
  opacity: 1;
}

//region slide-up
.@{prefix}-slide-up-enter-active {
  transition: opacity @normal-motion linear,
    transform @normal-motion @ease-out-quintic;
  transform-origin: 0 0;
}

.@{prefix}-slide-up-leave-active {
  transition: opacity @normal-motion linear,
    transform @normal-motion @ease-in-quintic;
  transform-origin: 0 0;
}

.@{prefix}-slide-up-enter,
.@{prefix}-slide-up-leave-to {
  transform: scaleY(0.75);
  transform-origin: 0 0;
  opacity: 0;
}

//endregion

//region alert-slide-up
.@{prefix}-alert-slide-up-enter-active {
  transition: opacity @normal-motion linear,
    height @normal-motion @ease-in-out-circular,
    transform @normal-motion @ease-in-out-circular;
  transform-origin: 0 0;
}

.@{prefix}-alert-slide-up-leave-active {
  transition: opacity @normal-motion linear,
    height @normal-motion @ease-in-out-circular,
    transform @normal-motion @ease-in-out-circular;
  transform-origin: 0 0;
}

.@{prefix}-alert-slide-up-enter,
.@{prefix}-alert-slide-up-leave-to {
  transform: scaleY(0);
  transform-origin: 0 0;
  opacity: 0;
}

//endregion

//region modal-zoom
.@{prefix}-modal-zoom-enter-active {
  overflow: hidden !important;
  transition: opacity @normal-motion linear, transform @normal-motion linear;
}

.@{prefix}-modal-zoom-leave-active {
  overflow: hidden !important;
  transition: opacity @normal-motion linear, transform @normal-motion linear;
}

.@{prefix}-modal-zoom-enter,
.@{prefix}-modal-zoom-leave-to {
  transform: scale(0);
  opacity: 0;
}

//endregion

//region check-zoom
.@{prefix}-check-zoom-enter-active {
  transition: opacity @normal-motion linear,
    transform @normal-motion @ease-out-backward;
}

.@{prefix}-check-zoom-leave-active {
  transition: opacity @normal-motion linear,
    transform @normal-motion @ease-in-backward;
}

.@{prefix}-check-zoom-enter,
.@{prefix}-check-zoom-leave-to {
  transform: scale(0);
  opacity: 0;
}

//endregion

//region fade
.@{prefix}-fade-enter-active {
  transition: opacity @normal-motion linear;
}

.@{prefix}-fade-leave-active {
  transition: opacity @normal-motion linear;
}

.@{prefix}-fade-enter,
.@{prefix}-fade-leave-to {
  opacity: 0;
}

//endregion

//region progress-active
@keyframes @progress-active {
  from {
    opacity: 0.5;
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
    opacity: 0;
  }
}

//endregion

//region spin
@keyframes @spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

//endregion
